<template>
  <div class="index">
    <canvas
      id="canvas"
      canvas-id="canvas"
      style="width: 300px; height: 300px"
    ></canvas>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import DrawPoster from 'uni-draw-poster';
export default Vue.extend({
  onReady() {
    // 获取绘制工具
    const ctx = uni.createCanvasContext('canvas');
    // 进行绘制

    // 背景与图片框架的绘制
    uni.downloadFile({
      url: '123',
      success: (res) => {
        ctx.drawImage(res.tempFilePath /** ...*/);
        uni.downloadFile({
          url: '123',
          success: (res) => {
            ctx.drawImage(res.tempFilePath /** ...*/);
            // 顶部字体绘制

            // 字体默认样式
            // 名称绘制
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();
            // 标签和手机号绘制
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();
            // 地址绘制
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();
            // 名片字段
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();

            // 换行字体绘制
            //.....

            // 卡片字体绘制
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();
            ctx.fillStyle = 'white';
            ctx.font = 'bold 12px sans-serif';
            ctx.fillText('...', 12 * 2, 38);
            ctx.restore();

            ctx.draw(true, () => {
              // 创建路径
              uni.canvasToTempFilePath({
                width: 300,
                height: 300,
                destWidth: 300,
                destHeight: 300,
                canvasId: 'canvas',
                success: (res) => {
                  console.log(res.tempFilePath);
                },
              });
            });
          },
        });
      },
    });
  },
});
</script>

<style lang="scss">
page,
.index {
  height: 100%;
}
.index {
  position: relative;
  background: rgba($color: grey, $alpha: 0.2);
}
canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
